<template>
  <div class="manage">

    <div class="top1">


      <div class="manage_top">
        <!-- //图片 -->
        <div class="manimg">
          <el-avatar shape="square" :size="100" fit="contain" :src="user.avatar" :alt="user.name"></el-avatar>
          <div class="social-share" data-sites="weibo,wechat" data-title="hh" data-url="http://www.itheima.com"
            data-wechatQrcodeHelper  ="'<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>'">

          </div>
        </div>
        <!-- 个人简历 -->
        <div class="manava">
          123
        </div>
      </div>
    </div>
    <div class="manage_content">
      <div class="manage_l">
        <ul>
          <router-link tag="li" to="/manage" active-class="actived" exact><a>个人信息</a></router-link>
          <router-link tag="li" to="/manage/soucang" active-class="actived"><a>我的收藏</a></router-link>
          <router-link tag="li" to="/manage/jieshu" active-class="actived"><a>我的借书</a></router-link>
        </ul>
      </div>
      <nuxt-child />

    </div>
  </div>
</template>
<script>
    import {
        getUser
    } from '@/utils/auth'
    export default {
        head: {
            script: [{
                src: 'https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js'
            }],
            link: [{
                rel: 'stylesheet',
                href: 'https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css'
            }, ]
        },
        data() {
            return {

                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                user: {}
            }
        },
        methods: {

        },
        created() {

            if (getUser().name === undefined) {
                this.$router.push('/login')
            }
            this.user = getUser()
        }
    }
</script>
<style>
    .actived {
        background-color: #f7d1c8;
    }

    .top1 {
        height: 200px;
        width: 100%;
        background-color: #cfe8fc;
    }

    .manage_top {
        width: 1200px;
        margin: 0 auto;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* .social‐share {
        height: 100px;
        background-color: pink;
    } */
    /* .manimg img {
        width: 120px;
        height: 120px;
        border-radius: 60px;
    } */

    .manage_content {
        /* height: 500px; */
        width: 1200px;
        margin: 20px auto;
        display: flex;
    }

    .manage_l {
        flex: 2;
    }

    .manage_l ul {
        width: 90%;
        border-bottom: 1px solid #e6e6e6;
    }

    .manage_l ul li {
        padding: 0 10px;
        margin: 5px 0;
        text-align: center;
        list-style: none;
        border-radius: 6px;
        cursor: pointer;
    }

    .manage_l ul li a {
        line-height: 34px;
        font-size: 16px;
        text-decoration: none;
        color: #000;
    }

    .manage_r {
        flex: 8;
        background-color: #fff;
    }
</style>
